import {Animated,} from 'react-native';
import {useEffect, useRef} from 'react';
import {useAppTheme, Text} from 'tsun-smart-ui';

export const ErrorText: React.FC<{
  text: string;
}> = ({text}) => {
  const theme = useAppTheme();
  const fadeAnim = useRef(new Animated.Value(0)).current;
  const shakeAnim = useRef(new Animated.Value(0)).current;

  useEffect(() => {
    if (text) {
      // 重置动画值
      fadeAnim.setValue(0);
      shakeAnim.setValue(0);

      // 并行执行淡入和抖动动画
      Animated.parallel([
        // 淡入动画
        Animated.timing(fadeAnim, {
          toValue: 1,
          duration: 300,
          useNativeDriver: true,
        }),
        // 抖动动画序列
        Animated.sequence([
          Animated.timing(shakeAnim, {
            toValue: 10,
            duration: 100,
            useNativeDriver: true,
          }),
          Animated.timing(shakeAnim, {
            toValue: -10,
            duration: 100,
            useNativeDriver: true,
          }),
          Animated.timing(shakeAnim, {
            toValue: 10,
            duration: 100,
            useNativeDriver: true,
          }),
          Animated.timing(shakeAnim, {
            toValue: 0,
            duration: 100,
            useNativeDriver: true,
          }),
        ]),
      ]).start();
    }
  }, [text, fadeAnim, shakeAnim]);

  return (
    <Animated.View
      style={{
        opacity: fadeAnim,
        transform: [{translateX: shakeAnim}],
      }}>
      <Text style={{color: theme.colors?.error?.primary}} variant='caption'>
        {text}
      </Text>
    </Animated.View>
  );
};
